<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电商平台 - 首页</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<header>
    <h1>电商平台</h1>
    <nav>
        <a href="index.html">首页</a>
        <a href="product-list.html">商品列表</a>
        <a href="user.html">用户中心</a>
    </nav>
</header>

<main>
    <section class="recommendations">
        <h2 id="recommend-title">推荐商品</h2>
        <p id="recommend-description" class="recommend-desc">为您精选的优质商品</p>
        <div id="recommend-list">
            <!-- 推荐商品将通过JS动态加载 -->
        </div>
    </section>
</main>

<footer>
    <p>© 2025 电商平台</p>
</footer>

<script src="api.js"></script>
<script>
    // 页面加载时获取推荐商品
    document.addEventListener('DOMContentLoaded', function() {
        loadRecommendations();
    });

    function loadRecommendations() {
        // 显示加载状态
        const container = document.getElementById('recommend-list');
        const titleElement = document.getElementById('recommend-title');
        const descElement = document.getElementById('recommend-description');

        container.innerHTML = '<div class="loading">加载推荐商品中...</div>';

        // 检查用户是否已登录
        const userToken = getAuthToken();
        if (userToken) {
            // 更新标题为个性化推荐
            titleElement.textContent = '为您推荐';
            descElement.textContent = '基于您的购买偏好为您推荐';

            // 如果用户已登录，直接调用推荐接口获取个性化推荐
            getRecommendations().then(result => {
                if (result.code === 1 && result.data && Array.isArray(result.data)) {
                    // 新接口返回3个产品，直接使用
                    renderRecommendations(result.data, true);
                } else {
                    throw new Error('推荐数据格式错误');
                }
            }).catch(error => {
                console.warn('获取个性化推荐失败，使用默认商品列表:', error);
                // 推荐失败时，更新标题
                titleElement.textContent = '热门商品';
                descElement.textContent = '推荐服务暂时不可用，为您展示热门商品';
                loadDefaultProducts();
            });
        } else {
            // 未登录用户显示默认商品列表
            titleElement.textContent = '热门商品';
            descElement.textContent = '登录后可获得个性化推荐';
            loadDefaultProducts();
        }
    }

    function loadDefaultProducts() {
        // 获取默认商品列表作为推荐（限制为3个商品保持一致性）
        getProductList(1, 3, { enableFlag: true }).then(result => {
            if (result.data && result.data.records && Array.isArray(result.data.records)) {
                renderRecommendations(result.data.records);
            } else {
                throw new Error('商品数据格式错误');
            }
        }).catch(error => {
            console.error('获取商品列表失败:', error);
            handleApiError(error);
            // 显示错误信息
            const container = document.getElementById('recommend-list');
            container.innerHTML = '<div class="error-message">加载推荐商品失败，请刷新页面重试</div>';
        });
    }

    function renderRecommendations(products, isPersonalized = false) {
        const container = document.getElementById('recommend-list');

        if (!products || products.length === 0) {
            container.innerHTML = '<div class="no-products">暂无推荐商品</div>';
            return;
        }

        container.innerHTML = products.map(product => `
                <div class="product-card ${isPersonalized ? 'personalized' : 'default'}">
                    ${isPersonalized ? '<div class="recommendation-badge">个性推荐</div>' : ''}
                    <div class="product-image-url">
                        <label>图片链接:</label>
                        <p class="image-url">${product.productImg || 'https://via.placeholder.com/300x200'}</p>
                    </div>
                    <h3>${product.productName || '未知商品'}</h3>
                    <p class="price">¥${(product.price || 0).toFixed(2)}</p>
                    <p class="description">${product.productDesc || '暂无描述'}</p>
                    <div class="product-actions">
                        <a href="product-detail.html?id=${product.id}" class="btn-primary">查看详情</a>
                        ${isLoggedIn() ? `<button onclick="quickBuy('${product.id}')" class="btn-secondary">快速购买</button>` : ''}
                    </div>
                </div>
            `).join('');
    }

    // 快速购买功能
    function quickBuy(productId) {
        if (!isLoggedIn()) {
            alert('请先登录后再购买');
            window.location.href = 'user.html';
            return;
        }

        if (confirm('确认要购买这个商品吗？')) {
            createOrder(productId, 1).then(result => {
                if (result.code === 1) {
                    alert(`订单创建成功！\n订单号: ${result.data}`);
                    // 可以选择跳转到用户中心查看订单
                    if (confirm('是否前往用户中心查看订单？')) {
                        window.location.href = 'user.html';
                    }
                } else {
                    throw new Error(result.msg || '创建订单失败');
                }
            }).catch(error => {
                console.error('快速购买失败:', error);
                alert('购买失败: ' + error.message);
            });
        }
    }
</script>
</body>
</html>